<template>
  <div>
    <van-cell :value="houseType || '内容'" is-link @click="show = true">
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="custom-title">户型</span>
      </template>
    </van-cell>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false,
      actions: [
        { name: '一室' },
        { name: '二室' },
        { name: '三室' },
        { name: '四室' },
        { name: '四室+' }
      ],
      houseType: ''
    }
  },
  methods: {
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false
      this.houseType = item.name
      this.$emit('houseType', item.name)
    }
  }
}
</script>

<style></style>
